<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="ball.css">
    <!-- <style>
        @keyframes round {
            from {
                background-color: rgb(209, 20, 178);
            }

            to {
                transform: rotate(360deg);
                background-color: rgb(20, 55, 209);
            }
        }

        .box {
            margin: 100px auto;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 1px solid red;
            outline: 1px solid blue;
            position: relative;
        }

        .ball {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(162, 221, 135);
            position: absolute;
            top: -50px;
            left: 150px;
            transform-origin: 50px 250px;
            animation: round 5s linear infinite both;
            animation-play-state: paused;
        }

        .box:hover .ball {
            animation-play-state: running;
        }

        .a2 {
            margin: 100px auto;
            width: 400px;
            height: 400px;
            border: 1px solid red;
            position: relative;
            display: flex;
            /* flex-flow: row nowrap; */
            justify-content: center;
            align-items: center
        }
/* -------------------第二个 -----------------------*/
        @keyframes lBallRun {
            from{
                transform: rotate(30deg);
                
            }
            25%{
                transform: rotate(0)
            }
            75%{
                transform: rotate(0);
                
            }
            to{
                transform: rotate(30deg)
            }
        }
        @keyframes rBallRun {
            from{
                transform: rotate(0deg)
            }
            25%{
                transform: rotate(0)
            }
            50%{
                transform: rotate(-30deg)
            }
            75%{
                transform: rotate(0)
            }
            to{
                transform: rotate(0deg)
            }
        }
        .smallball {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgb(0, 0, 0);
           
        }
        .line-ball{
            position: relative;
            transform-origin: center -190px;
        }
        .line-ball:first-child{
            animation: lBallRun 2s linear infinite;
        }
        .line-ball:last-child{
            animation: rBallRun 2s linear infinite;
        }
        .line {
            position: absolute;
            width: 1px;
            height: 200px;
            top: -190px;
            left:9.5px;
            background-color: #000;
            transform-origin: 0 0;
        }
    </style> -->
</head>

<body>

    <div class="box">

        <!-- <div class="line-ball">
            <div class="line"></div>
            <div class="smallball"></div>
        </div>

        <div class="smallball"></div>
        <div class="smallball"></div>
        <div class="smallball"></div>
        <div class="smallball"></div>
        <div class="smallball"></div>
        <div class="smallball"></div>
        <div class="line-ball">
            <div class="line"></div>
            <div class="smallball"></div>
        </div> -->
        <div class="line-ball one">
            <div class="line"></div>
            <div class="smallball"></div>
        </div>
        <div class="balls">
            
            <div class="smallball"></div>
            <div class="smallball"></div>
            <div class="smallball"></div>
            <div class="smallball"></div>
            <div class="smallball"></div>
            <!-- <div class="smallball"></div> -->
            
        </div>
        <div class="line-ball two">
            <div class="line"></div>
            <div class="smallball"></div>
        </div>


    </div>
</body>

</html>